<!doctype html>

<meta charset="utf-8">

<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width,maximum-scale=1">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

<title>Pickadate.js &#8226; Themes</title>

<link rel="stylesheet" href="demo/style.css">

<style type="text/css">


    /**
     * Mobile-first, responsive styling for pickadate.js
     */


    /**
     * When the calendar is open
     */

    /* Prevent the page from scrolling */
    /*body*/.pickadate__active {
        overflow: hidden;
    }

    /* And add the "active" state to the input */
    /*input*/.pickadate__input--active {
        border-color: #0089ec !important;
    }



    /**
     * The holder that fills the entire screen
     */
    .picker-holder--default .pickadate__holder {

        /* The base font-size */
        font-size: 16px;

        line-height: 1.2;
        color: #000;

        position: fixed;
        z-index: 10000;

        width: 100%;
        height: 100%;

        /* Fade out the background, then immediately hide the holder */
        -webkit-transition: background .15s ease-out, top 0s .2s;
           -moz-transition: background .15s ease-out, top 0s .2s;
                transition: background .15s ease-out, top 0s .2s;
    }

    /**
     * The frame that bounds the calendar
     */
    .picker-holder--default .pickadate__frame {
        min-width: 256px;
        max-width: 666px;
        margin: 0 auto;

        position: absolute;

        /* Allow the frame to be scrolled in case the screen is too small */
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        /* Animate the frame in and out of view */
        -webkit-transition: all .15s ease-out;
           -moz-transition: all .15s ease-out;
                transition: all .15s ease-out;
    }

    /**
     * Make the calendar holder and frame fullscreen
     */
    .picker-holder--default .pickadate__holder,
    .picker-holder--default .pickadate__frame {
        top: 100%;
        bottom: 0;
        left: 0;
        right: 0;
    }


    /**
     * When the calendar opens
     */
    .picker-holder--default .pickadate__holder--opened {

        /* Show a translucent black background (order is important for IE) */
        background: transparent;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)"; /* IE8 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000); /* IE6 & 7 */
              zoom: 1;
        background: rgba(0,0,0,.32); /* Normal browsers */

        /* Animate in the background */
        -webkit-transition: background .15s ease-out;
           -moz-transition: background .15s ease-out;
                transition: background .15s ease-out;
    }

    /* Bring the holder and frame into view */
    .picker-holder--default .pickadate__holder--opened,
    .picker-holder--default .pickadate__holder--opened .pickadate__frame {
        top: 0;
    }







    /**
     * The calendar wrapper
     */
    .picker-holder--default .pickadate__wrap {
        display: table;
        width: 100%;
        height: 100%;
    }

    /**
     * The calendar itself
     */
    .picker-holder--default .pickadate__calendar {
        display: table-cell;
        vertical-align: middle;
        background: #fff;
        padding: 1em;
    }



    /**
     * The calendar table of dates
     */
    .picker-holder--default .pickadate__table {
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        font-size: inherit;
        width: 100%;
        margin-top: .5em;
    }

    /* Remove browser stylings on a table cell */
    .picker-holder--default .pickadate__table td {
        margin: 0;
        padding: 0;
    }



    /**
     * The header containing the month and year tags/selectors
     */
    .picker-holder--default .pickadate__header {
        text-align: center;
        position: relative;
    }

    .picker-holder--default .pickadate__nav--prev,
    .picker-holder--default .pickadate__nav--next {
        position: absolute;
        top: -.1em;
        padding: .5em;
        margin: -.5em;
        text-align: center;
        min-width: 24px;
        height: 24px;
        line-height: 26px;
    }
    .picker-holder--default .pickadate__nav--prev {
        left: 0;
    }
    .picker-holder--default .pickadate__nav--next {
        right: 0;
    }

    .picker-holder--default .pickadate__month,
    .picker-holder--default .pickadate__year {
        font-weight: 500;
        display: inline-block;
    }
    .picker-holder--default .pickadate__year {
        color: #999;
        font-size: .8em;
        font-style: italic;
        margin-left: .5em;
    }

    .picker-holder--default .pickadate__select--month,
    .picker-holder--default .pickadate__select--year {
        font-size: .8em;
        border: 1px solid #ccc;
        height: 2.5em;
        padding: .66em .25em; /* For firefox */
        margin-top: -.5em;
    }
    .picker-holder--default .pickadate__select--month {
        width: 35%;
    }
    .picker-holder--default .pickadate__select--year {
        width: 22.5%;
        margin-left: .5em;
    }
    .picker-holder--default .pickadate__select--month:focus,
    .picker-holder--default .pickadate__select--year:focus {
        border-color: #0089ec;
    }




    /**
     * The weekday labels
     */
    .picker-holder--default .pickadate__weekday {
        width: 14.285714286%; /* 100/7 */
        font-size: .75em;
        padding-bottom: .25em;
        color: #999;
        font-weight: 500;
    }


    /**
     * The days on the calendar
     */
    .picker-holder--default .pickadate__day {
        padding: .33em 0 .25em;
        font-weight: 100;
        border: 1px solid #fff;
        margin-bottom: 1px;
    }

    /**
     * The various states of a day
     */
    .picker-holder--default .pickadate__day--today {
        color: #0089ec;
        position: relative;
    }
    .picker-holder--default .pickadate__day--today:before {
        content: " ";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 0;
        height: 0;
        border-top: .5em solid #0059bc;
        border-left: .5em solid transparent;
    }
    .picker-holder--default .pickadate__day--selected,
    .picker-holder--default .pickadate__day--selected:hover {
        border-color: #0089ec;
    }
    .picker-holder--default .pickadate__day--highlighted {
        background: #fff;
    }
    .picker-holder--default .pickadate__day--disabled:before {
        border-top-color: #aaa;
    }
    .picker-holder--default .pickadate__day--outfocus {
        color: #ddd;

        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        filter: alpha(opacity=75);
        -moz-opacity: .75;
             opacity: .75;
    }





    /**
     * The footer containing the "today" and "clear" buttons
     */
    .picker-holder--default .pickadate__footer {
        text-align: center;
        margin: .25em 0 -.75em;
    }

    .picker-holder--default .pickadate__button--today,
    .picker-holder--default .pickadate__button--clear {
        border: 1px solid #fff;
        background: #fff;
        font-size: .8em;
        padding: .66em 0;
        margin: 0 2.5%;
        font-weight: bold;
        width: 40%;
    }
    .picker-holder--default .pickadate__button--today:before,
    .picker-holder--default .pickadate__button--clear:before {
        position: relative;
        display: inline-block;
        height: 0;
    }
    .picker-holder--default .pickadate__button--today:before {
        content: " ";
        margin-right: .45em;
        top: -.05em;
        width: 0;
        border-top: .66em solid #0089ec;
        border-left: .66em solid transparent;
    }
    .picker-holder--default .pickadate__button--clear:before {
        content: "×";
        margin-right: .35em;
        top: -.1em;
        color: #e20;
        vertical-align: top;
        font-size: 1.1em;
    }
    .picker-holder--default .pickadate__button--today:focus,
    .picker-holder--default .pickadate__button--clear:focus {
        background: #b1dcfb;
        border-color: #0089ec;
        outline: none;
    }




    /**
     * The hover effect on any buttons
     */
    .picker-holder--default .pickadate__day--infocus:hover,
    .picker-holder--default .pickadate__day--outfocus:hover,
    .picker-holder--default .pickadate__nav--prev:hover,
    .picker-holder--default .pickadate__nav--next:hover,
    .picker-holder--default .pickadate__button--today:hover,
    .picker-holder--default .pickadate__button--clear:hover {
        cursor: pointer;
        color: #000;
        background: #b1dcfb;
    }
    .picker-holder--default .pickadate__day--disabled,
    .picker-holder--default .pickadate__day--disabled:hover {
        background: #f5f5f5;
        border-color: #f5f5f5;
        color: #ddd;
        cursor: default;
    }
    .picker-holder--default .pickadate__day--highlighted:hover,
    .picker-holder--default .pickadate__holder--focused .pickadate__day--highlighted {
        background: #0089ec;
        color: #fff;
    }




    /**
     * Adjust the calendar for not so tiny screens
     * by just increasing the font size a bit
     */
    @media (min-height: 342px) {
        .picker-holder--default .pickadate__calendar {
            font-size: 1.25em;
        }
    }


    /**
     * For bigger viewports, adjust the calendar
     * to not cover the entire screen
     */
    @media (min-height: 424px) {

        /* Align the frame to the bottom, rather than top */
        .picker-holder--default .pickadate__frame {
            overflow: visible;
            top: auto;
            bottom: -100%;
        }
        .picker-holder--default .pickadate__holder--opened .pickadate__frame {
            top: auto;
            bottom: 0;
        }


        /* Remove the calendar middle-aligned styling */
        .picker-holder--default .pickadate__wrap,
        .picker-holder--default .pickadate__calendar {
            display: block;
        }
        .picker-holder--default .pickadate__calendar {

            /* Increase the font size a bit more */
            font-size: 1.33em;

            /* Add the borders except the bottom one */
            border: 1px solid #777;
            border-top-color: #888;
            border-bottom-width: 0;

            /* Make 'em rounded at the top corners */
            -webkit-border-radius: 6px 6px 0 0;
               -moz-border-radius: 6px 6px 0 0;
                    border-radius: 6px 6px 0 0;

            /* And finally, add a nice shadow */
            -webkit-box-shadow: 0 12px 36px 16px rgba(0,0,0,.24);
               -moz-box-shadow: 0 12px 36px 16px rgba(0,0,0,.24);
                    box-shadow: 0 12px 36px 16px rgba(0,0,0,.24);
        }


        /* Increase the spacing a tad */
        .picker-holder--default .pickadate__table {
            margin-top: .75em;
        }
        .picker-holder--default .pickadate__weekday {
            padding-bottom: .5em;
        }
        .picker-holder--default .pickadate__footer {
            margin: .5em 0 -.5em;
        }
    }


    /**
     * For bigger monitors still, move it away
     * from the bottom edge of the screen
     * and round the top and bottom corners.
     */
    @media (min-height: 542px) {

        .picker-holder--default .pickadate__frame {
            margin-bottom: 5%;
        }

        .picker-holder--default .pickadate__calendar {
            font-size: 1.5em;
            border-bottom-width: 1px;

            -webkit-border-radius: 6px;
               -moz-border-radius: 6px;
                    border-radius: 6px;
        }
    }
</style>



<style type="text/css">



    /**
     * The picker holder
     */
    .picker-holder--classic .pickadate__holder {

        /* The base font-size */
        font-size: 16px;

        line-height: 1.2;
        color: #000;

        position: absolute;
        z-index: 10000;

        width: 100%;
        height: 0;
    }


    /**
     * The frame that bounds the calendar
     */
    .picker-holder--classic .pickadate__frame {
        position: relative;
        max-width: 420px;
        min-width: 256px;
        max-height: 0;
        overflow-y: hidden;

        -webkit-transition: all .15s ease-out;
           -moz-transition: all .15s ease-out;
                transition: all .15s ease-out;
    }


    /**
     * When the calendar opens
     */
    .picker-holder--classic .pickadate__holder--opened .pickadate__frame {
        top: .5em;
        max-height: 25em;

        -webkit-box-shadow: 0 6px 18px 1px rgba(0,0,0,.12);
           -moz-box-shadow: 0 6px 18px 1px rgba(0,0,0,.12);
                box-shadow: 0 6px 18px 1px rgba(0,0,0,.12);
    }


    /**
     * The calendar itself
     */

    .picker-holder--classic .pickadate__calendar {
        color: #000;
        background: #fff;

        padding: 1em;
        font-size: 1em;

        /* Add the borders */
        border: 1px solid #ccc;

        -webkit-border-radius: 6px;
           -moz-border-radius: 6px;
                border-radius: 6px;
    }



    /**
     * The calendar table of dates
     */
    .picker-holder--classic .pickadate__table {
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        font-size: inherit;
        width: 100%;
        margin-top: .75em;
    }

    /* Remove browser stylings on a table cell */
    .picker-holder--classic .pickadate__table td {
        margin: 0;
        padding: 0;
    }



    /**
     * The header containing the month and year tags/selectors
     */
    .picker-holder--classic .pickadate__header {
        text-align: center;
        position: relative;
    }

    .picker-holder--classic .pickadate__nav--prev,
    .picker-holder--classic .pickadate__nav--next {
        position: absolute;
        top: -.1em;
        padding: .5em;
        margin: -.5em;
        text-align: center;
        min-width: 24px;
        height: 24px;
        line-height: 26px;
    }
    .picker-holder--classic .pickadate__nav--prev {
        left: 0;
    }
    .picker-holder--classic .pickadate__nav--next {
        right: 0;
    }


    .picker-holder--classic .pickadate__month,
    .picker-holder--classic .pickadate__year {
        font-weight: 500;
        display: inline-block;
    }
    .picker-holder--classic .pickadate__year {
        color: #999;
        font-size: .8em;
        font-style: italic;
        margin-left: .5em;
    }



    .picker-holder--classic .pickadate__select--month,
    .picker-holder--classic .pickadate__select--year {
        font-size: .8em;
        border: 1px solid #ccc;
        height: 2.5em;
        margin-top: -.5em;
    }
    .picker-holder--classic .pickadate__select--month {
        width: 35%;
    }
    .picker-holder--classic .pickadate__select--year {
        width: 22.5%;
        margin-left: .5em;
    }
    .picker-holder--classic .pickadate__select--month:focus,
    .picker-holder--classic .pickadate__select--year:focus {
        border-color: #0089ec;
    }




    /**
     * The weekday labels
     */
    .picker-holder--classic .pickadate__weekday {
        width: 14.285714286%; /* 100/7 */
        font-size: .75em;
        padding-bottom: .5em;
        color: #999;
        font-weight: 500;
    }


    /**
     * The days on the calendar
     */
    .picker-holder--classic .pickadate__day {
        padding: .33em 0 .25em;
        font-weight: 100;
        border: 1px solid #fff;
        margin-bottom: 1px;
    }

    /**
     * The various states of a day
     */
    .picker-holder--classic .pickadate__day--today {
        color: #0089ec;
        position: relative;
    }
    .picker-holder--classic .pickadate__day--today:before {
        content: " ";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 0;
        height: 0;
        border-top: .5em solid #0059bc;
        border-left: .5em solid transparent;
    }
    .picker-holder--classic .pickadate__day--selected,
    .picker-holder--classic .pickadate__day--selected:hover {
        border-color: #0089ec;
    }
    .picker-holder--classic .pickadate__day--highlighted {
        background: #fff;
    }
    .picker-holder--classic .pickadate__day--disabled:before {
        border-top-color: #aaa;
    }
    .picker-holder--classic .pickadate__day--outfocus {
        color: #ddd;

        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        filter: alpha(opacity=75);
        -moz-opacity: .75;
             opacity: .75;
    }



    /**
     * The footer containing the "today" and "clear" buttons
     */
    .picker-holder--classic .pickadate__footer {
        text-align: center;
        margin: .5em 0 -.5em;
    }

    .picker-holder--classic .pickadate__button--today,
    .picker-holder--classic .pickadate__button--clear {
        border: 1px solid #fff;
        background: #fff;
        font-size: .8em;
        padding: .66em 0;
        margin: 0 2.5%;
        font-weight: bold;
        width: 40%;
    }
    .picker-holder--classic .pickadate__button--today:before,
    .picker-holder--classic .pickadate__button--clear:before {
        position: relative;
        display: inline-block;
        height: 0;
    }
    .picker-holder--classic .pickadate__button--today:before {
        content: " ";
        margin-right: .45em;
        top: -.05em;
        width: 0;
        border-top: .66em solid #0089ec;
        border-left: .66em solid transparent;
    }
    .picker-holder--classic .pickadate__button--clear:before {
        content: "×";
        margin-right: .35em;
        top: -.1em;
        color: #e20;
        vertical-align: top;
        font-size: 1.1em;
    }
    .picker-holder--classic .pickadate__button--today:focus,
    .picker-holder--classic .pickadate__button--clear:focus {
        background: #b1dcfb;
        border-color: #0089ec;
        outline: none;
    }




    /**
     * The hover effect on any buttons
     */
    .picker-holder--classic .pickadate__day--infocus:hover,
    .picker-holder--classic .pickadate__day--outfocus:hover,
    .picker-holder--classic .pickadate__nav--prev:hover,
    .picker-holder--classic .pickadate__nav--next:hover,
    .picker-holder--classic .pickadate__button--today:hover,
    .picker-holder--classic .pickadate__button--clear:hover {
        cursor: pointer;
        color: #000;
        background: #b1dcfb;
    }
    .picker-holder--classic .pickadate__day--disabled,
    .picker-holder--classic .pickadate__day--disabled:hover {
        background: #f5f5f5;
        border-color: #f5f5f5;
        color: #ddd;
        cursor: default;
    }
    .picker-holder--classic .pickadate__day--highlighted:hover,
    .picker-holder--classic .pickadate__holder--focused .pickadate__day--highlighted {
        background: #0089ec;
        color: #fff;
    }
</style>



<style type="text/css">



    /**
     * The picker holder
     */
    .picker-holder--inline .pickadate__holder {

        /* The base font-size */
        font-size: 16px;

        line-height: 1.2;
        color: #000;
    }


    /**
     * The frame that bounds the calendar
     */
    .picker-holder--inline .pickadate__frame {
        position: relative;
        min-width: 256px;
        max-height: 0;
        overflow-y: hidden;

        -webkit-transition: all .15s ease-out;
           -moz-transition: all .15s ease-out;
                transition: all .15s ease-out;
    }


    /**
     * When the calendar opens
     */
    .picker-holder--inline .pickadate__holder--opened .pickadate__frame {
        top: .5em;
        max-height: 25em;
    }


    /**
     * The calendar itself
     */

    .picker-holder--inline .pickadate__calendar {
        color: #000;
        background: #fff;

        padding: 1em;
        font-size: 1em;

        /* Add the borders */
        border: 1px solid #ccc;
    }



    /**
     * The calendar table of dates
     */
    .picker-holder--inline .pickadate__table {
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        font-size: inherit;
        width: 100%;
        margin-top: .75em;
    }

    /* Remove browser stylings on a table cell */
    .picker-holder--inline .pickadate__table td {
        margin: 0;
        padding: 0;
    }



    /**
     * The header containing the month and year tags/selectors
     */
    .picker-holder--inline .pickadate__header {
        text-align: center;
        position: relative;
    }

    .picker-holder--inline .pickadate__nav--prev,
    .picker-holder--inline .pickadate__nav--next {
        position: absolute;
        top: -.1em;
        padding: .5em;
        margin: -.5em;
        text-align: center;
        min-width: 24px;
        height: 24px;
        line-height: 26px;
    }
    .picker-holder--inline .pickadate__nav--prev {
        left: 0;
    }
    .picker-holder--inline .pickadate__nav--next {
        right: 0;
    }


    .picker-holder--inline .pickadate__month,
    .picker-holder--inline .pickadate__year {
        font-weight: 500;
        display: inline-block;
    }
    .picker-holder--inline .pickadate__year {
        color: #999;
        font-size: .8em;
        font-style: italic;
        margin-left: .5em;
    }



    .picker-holder--inline .pickadate__select--month,
    .picker-holder--inline .pickadate__select--year {
        font-size: .8em;
        border: 1px solid #ccc;
        height: 2.5em;
        margin-top: -.5em;
    }
    .picker-holder--inline .pickadate__select--month {
        width: 35%;
    }
    .picker-holder--inline .pickadate__select--year {
        width: 22.5%;
        margin-left: .5em;
    }
    .picker-holder--inline .pickadate__select--month:focus,
    .picker-holder--inline .pickadate__select--year:focus {
        border-color: #0089ec;
    }




    /**
     * The weekday labels
     */
    .picker-holder--inline .pickadate__weekday {
        width: 14.285714286%; /* 100/7 */
        font-size: .75em;
        padding-bottom: .5em;
        color: #999;
        font-weight: 500;
    }


    /**
     * The days on the calendar
     */
    .picker-holder--inline .pickadate__day {
        padding: .33em 0 .25em;
        font-weight: 100;
        border: 1px solid #fff;
        margin-bottom: 1px;
    }

    /**
     * The various states of a day
     */
    .picker-holder--inline .pickadate__day--today {
        color: #0089ec;
        position: relative;
    }
    .picker-holder--inline .pickadate__day--today:before {
        content: " ";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 0;
        height: 0;
        border-top: .5em solid #0059bc;
        border-left: .5em solid transparent;
    }
    .picker-holder--inline .pickadate__day--selected,
    .picker-holder--inline .pickadate__day--selected:hover {
        border-color: #0089ec;
    }
    .picker-holder--inline .pickadate__day--highlighted {
        background: #fff;
    }
    .picker-holder--inline .pickadate__day--disabled:before {
        border-top-color: #aaa;
    }
    .picker-holder--inline .pickadate__day--outfocus {
        color: #ddd;

        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        filter: alpha(opacity=75);
        -moz-opacity: .75;
             opacity: .75;
    }



    /**
     * The footer containing the "today" and "clear" buttons
     */
    .picker-holder--inline .pickadate__footer {
        text-align: center;
        margin: .5em 0 -.5em;
    }

    .picker-holder--inline .pickadate__button--today,
    .picker-holder--inline .pickadate__button--clear {
        border: 1px solid #fff;
        background: #fff;
        font-size: .8em;
        padding: .66em 0;
        margin: 0 2.5%;
        font-weight: bold;
        width: 40%;
    }
    .picker-holder--inline .pickadate__button--today:before,
    .picker-holder--inline .pickadate__button--clear:before {
        position: relative;
        display: inline-block;
        height: 0;
    }
    .picker-holder--inline .pickadate__button--today:before {
        content: " ";
        margin-right: .45em;
        top: -.05em;
        width: 0;
        border-top: .66em solid #0089ec;
        border-left: .66em solid transparent;
    }
    .picker-holder--inline .pickadate__button--clear:before {
        content: "×";
        margin-right: .35em;
        top: -.1em;
        color: #e20;
        vertical-align: top;
        font-size: 1.1em;
    }
    .picker-holder--inline .pickadate__button--today:focus,
    .picker-holder--inline .pickadate__button--clear:focus {
        background: #b1dcfb;
        border-color: #0089ec;
        outline: none;
    }




    /**
     * The hover effect on any buttons
     */
    .picker-holder--inline .pickadate__day--infocus:hover,
    .picker-holder--inline .pickadate__day--outfocus:hover,
    .picker-holder--inline .pickadate__nav--prev:hover,
    .picker-holder--inline .pickadate__nav--next:hover,
    .picker-holder--inline .pickadate__button--today:hover,
    .picker-holder--inline .pickadate__button--clear:hover {
        cursor: pointer;
        color: #000;
        background: #b1dcfb;
    }
    .picker-holder--inline .pickadate__day--disabled,
    .picker-holder--inline .pickadate__day--disabled:hover {
        background: #f5f5f5;
        border-color: #f5f5f5;
        color: #ddd;
        cursor: default;
    }
    .picker-holder--inline .pickadate__day--highlighted:hover,
    .picker-holder--inline .pickadate__holder--focused .pickadate__day--highlighted {
        background: #0089ec;
        color: #fff;
    }
</style>



<style type="text/css">



    /**
     * The picker holder
     */
    .picker-holder--inline-fixed .pickadate__holder {

        /* The base font-size */
        font-size: 16px;

        line-height: 1.2;
        color: #000;
    }


    /**
     * The frame that bounds the calendar
     */
    .picker-holder--inline-fixed .pickadate__frame {
        position: relative;
        min-width: 256px;
        top: .5em;

        -webkit-transition: all .15s ease-out;
           -moz-transition: all .15s ease-out;
                transition: all .15s ease-out;
    }


    /**
     * The calendar itself
     */

    .picker-holder--inline-fixed .pickadate__calendar {
        color: #000;
        background: #fff;

        padding: 1em;
        font-size: 1em;

        /* Add the borders */
        border: 1px solid #ccc;
    }



    /**
     * The calendar table of dates
     */
    .picker-holder--inline-fixed .pickadate__table {
        text-align: center;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        font-size: inherit;
        width: 100%;
        margin-top: .75em;
    }

    /* Remove browser stylings on a table cell */
    .picker-holder--inline-fixed .pickadate__table td {
        margin: 0;
        padding: 0;
    }



    /**
     * The header containing the month and year tags/selectors
     */
    .picker-holder--inline-fixed .pickadate__header {
        text-align: center;
        position: relative;
    }

    .picker-holder--inline-fixed .pickadate__nav--prev,
    .picker-holder--inline-fixed .pickadate__nav--next {
        position: absolute;
        top: -.1em;
        padding: .5em;
        margin: -.5em;
        text-align: center;
        min-width: 24px;
        height: 24px;
        line-height: 26px;
    }
    .picker-holder--inline-fixed .pickadate__nav--prev {
        left: 0;
    }
    .picker-holder--inline-fixed .pickadate__nav--next {
        right: 0;
    }


    .picker-holder--inline-fixed .pickadate__month,
    .picker-holder--inline-fixed .pickadate__year {
        font-weight: 500;
        display: inline-block;
    }
    .picker-holder--inline-fixed .pickadate__year {
        color: #999;
        font-size: .8em;
        font-style: italic;
        margin-left: .5em;
    }



    .picker-holder--inline-fixed .pickadate__select--month,
    .picker-holder--inline-fixed .pickadate__select--year {
        font-size: .8em;
        border: 1px solid #ccc;
        height: 2.5em;
        margin-top: -.5em;
    }
    .picker-holder--inline-fixed .pickadate__select--month {
        width: 35%;
    }
    .picker-holder--inline-fixed .pickadate__select--year {
        width: 22.5%;
        margin-left: .5em;
    }
    .picker-holder--inline-fixed .pickadate__select--month:focus,
    .picker-holder--inline-fixed .pickadate__select--year:focus {
        border-color: #0089ec;
    }




    /**
     * The weekday labels
     */
    .picker-holder--inline-fixed .pickadate__weekday {
        width: 14.285714286%; /* 100/7 */
        font-size: .75em;
        padding-bottom: .5em;
        color: #999;
        font-weight: 500;
    }


    /**
     * The days on the calendar
     */
    .picker-holder--inline-fixed .pickadate__day {
        padding: .33em 0 .25em;
        font-weight: 100;
        border: 1px solid #fff;
        margin-bottom: 1px;
    }

    /**
     * The various states of a day
     */
    .picker-holder--inline-fixed .pickadate__day--today {
        color: #0089ec;
        position: relative;
    }
    .picker-holder--inline-fixed .pickadate__day--today:before {
        content: " ";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 0;
        height: 0;
        border-top: .5em solid #0059bc;
        border-left: .5em solid transparent;
    }
    .picker-holder--inline-fixed .pickadate__day--selected,
    .picker-holder--inline-fixed .pickadate__day--selected:hover {
        border-color: #0089ec;
    }
    .picker-holder--inline-fixed .pickadate__day--highlighted {
        background: #fff;
    }
    .picker-holder--inline-fixed .pickadate__day--disabled:before {
        border-top-color: #aaa;
    }
    .picker-holder--inline-fixed .pickadate__day--outfocus {
        color: #ddd;

        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
        filter: alpha(opacity=75);
        -moz-opacity: .75;
             opacity: .75;
    }



    /**
     * The footer containing the "today" and "clear" buttons
     */
    .picker-holder--inline-fixed .pickadate__footer {
        text-align: center;
        margin: .5em 0 -.5em;
    }

    .picker-holder--inline-fixed .pickadate__button--today,
    .picker-holder--inline-fixed .pickadate__button--clear {
        border: 1px solid #fff;
        background: #fff;
        font-size: .8em;
        padding: .66em 0;
        margin: 0 2.5%;
        font-weight: bold;
        width: 40%;
    }
    .picker-holder--inline-fixed .pickadate__button--today:before,
    .picker-holder--inline-fixed .pickadate__button--clear:before {
        position: relative;
        display: inline-block;
        height: 0;
    }
    .picker-holder--inline-fixed .pickadate__button--today:before {
        content: " ";
        margin-right: .45em;
        top: -.05em;
        width: 0;
        border-top: .66em solid #0089ec;
        border-left: .66em solid transparent;
    }
    .picker-holder--inline-fixed .pickadate__button--clear:before {
        content: "×";
        margin-right: .35em;
        top: -.1em;
        color: #e20;
        vertical-align: top;
        font-size: 1.1em;
    }
    .picker-holder--inline-fixed .pickadate__button--today:focus,
    .picker-holder--inline-fixed .pickadate__button--clear:focus {
        background: #b1dcfb;
        border-color: #0089ec;
        outline: none;
    }




    /**
     * The hover effect on any buttons
     */
    .picker-holder--inline-fixed .pickadate__day--infocus:hover,
    .picker-holder--inline-fixed .pickadate__day--outfocus:hover,
    .picker-holder--inline-fixed .pickadate__nav--prev:hover,
    .picker-holder--inline-fixed .pickadate__nav--next:hover,
    .picker-holder--inline-fixed .pickadate__button--today:hover,
    .picker-holder--inline-fixed .pickadate__button--clear:hover {
        cursor: pointer;
        color: #000;
        background: #b1dcfb;
    }
    .picker-holder--inline-fixed .pickadate__day--disabled,
    .picker-holder--inline-fixed .pickadate__day--disabled:hover {
        background: #f5f5f5;
        border-color: #f5f5f5;
        color: #ddd;
        cursor: default;
    }
    .picker-holder--inline-fixed .pickadate__day--highlighted:hover,
    .picker-holder--inline-fixed .pickadate__holder--focused .pickadate__day--highlighted {
        background: #0089ec;
        color: #fff;
    }
</style>

<!--[if lt IE 9]>
    <script>document.createElement('section')</script>
<![endif]-->


<body>


    <section class="holder holder-top holder-clean">

        <h1><a href="http://amsul.github.com/pickadate.js" class="link-inherit"><strong title="Pick a Date" class="underline-highlight">pickadate.js</strong></a></h1>
        <h2>A mobile-friendly, responsive, and lightweight jQuery dateinput picker<br><small class="dimmed"><small><small>9.6kb min, 4.0kb gzipped</small></small></small></h2>

        <a href="https://github.com/amsul/pickadate.js"><img width="128" height="128" style="position:absolute;top:0;right:0;border:0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

        <h4><a href="https://github.com/amsul/pickadate.js/archive/gh-pages.zip">Download pickadate.js v2.1.8</a> (<a href="docs.htm#legacy">for old browsers</a>) or <a href="docs.htm">read the docs</a></h4>

    </section>


    <section class="holder" id="default">

        <h3><a class="link-anchor" href="#default">&sect;</a><strong class="underline-highlight">Default</strong></h3>

        <fieldset class="picker-holder--default">
            <input id="picker_default" type="text">
        </fieldset>

    </section>


    <section class="holder">

        <p>For all the themes below, you can scroll the picker into view with something like this:</p>

        <pre><code data-language="javascript">$( '.datepicker' ).pickadate({
    onOpen: function() {
        scrollPageTo( this.$node )
    }
})

function&nbsp;scrollPageTo( $node ) {
    $( 'html, body' ).animate({
        scrollTop: ~~$node.offset().top -&nbsp;60
    }, 150)
}</code></pre>

    </section>


    <section class="holder" id="classic">

        <h3><a class="link-anchor" href="#classic">&sect;</a><strong class="underline-highlight">Classic</strong></h3>

        <fieldset class="picker-holder--classic">
            <input id="picker_classic" type="text">
        </fieldset>

    </section>


    <section class="holder" id="inline">

        <h3><a class="link-anchor" href="#inline">&sect;</a><strong class="underline-highlight">Inline</strong></h3>

        <fieldset class="picker-holder--inline">
            <input id="picker_inline" type="text">
        </fieldset>

    </section>


    <section class="holder" id="inline_fixed">

        <h3><a class="link-anchor" href="#inline_fixed">&sect;</a><strong class="underline-highlight">Inline fixed</strong></h3>

        <fieldset class="picker-holder--inline-fixed">
            <input id="picker_inline_fixed" type="text">
        </fieldset>

    </section>


    <section class="holder aligncenter">
        <p><a class="button-full" href="https://github.com/amsul/pickadate.js/archive/gh-pages.zip">Download pickadate.js v2.1.8</a></p>
        <small class="dimmed">
            <p>Browser support: <a class="dimmed" href="docs.htm#legacy">IE7+</a>, Chrome, Firefox, Safari, Opera, iOS Safari, Android browser</p>
            <p>Dependency: jQuery 1.7+</p>
        </small>
        <p><a href="docs.htm">Read the docs</a> or <a href="https://github.com/amsul/pickadate.js">view project on Github</a></p>
    </section>


    <section class="holder holder-clean aligncenter">
        <h2><a href="http://blog.teamtreehouse.com/" target="_blank"><img width="158" height="33" src="demo/TreehouseShowFeature.png" alt="Featured on The Treehouse Show"></a></h2>
        <p class="dimmed"><small>Made by <a class="dimmed" href="https://twitter.com/amsul_" target="_blank">Amsul</a><span class="peace"></span></small></p>
    </section>


    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="demo/rainbow.js"></script>
    <script src="source/pickadate.legacy.js"></script>

    <script type="text/javascript">
        $( '#picker_default' ).pickadate()
        $( '#picker_classic' ).pickadate({
            onOpen: function() {
                scrollPageTo( this.$node )
            },

            /**
             * This is just for demo purposes. You should change
             * the styling for `.pickadate__active` in your stylesheet
             * to handle the "scrollability" of the page.
             */
            onClose: initialBodyState
        })
        $( '#picker_inline' ).pickadate({
            onOpen: function() {
                scrollPageTo( this.$node )
            },

            /**
             * This is just for demo purposes. You should change
             * the styling for `.pickadate__active` in your stylesheet
             * to handle the "scrollability" of the page.
             */
            onClose: initialBodyState
        })
        $( '#picker_inline_fixed' ).pickadate({
            onOpen: function() {
                scrollPageTo( this.$node )
            },

            /**
             * This is just for demo purposes. You should change
             * the styling for `.pickadate__active` in your stylesheet
             * to handle the "scrollability" of the page.
             */
            onClose: initialBodyState
        })

        function scrollPageTo( $node ) {
            $( 'html, body' ).animate({
                scrollTop: ~~$node.offset().top - 60
            }, 150)

            /**
             * This is just for demo purposes. You should change
             * the styling for `.pickadate__active` in your stylesheet
             * to handle the "scrollability" of the page.
             */
            $( 'body' ).css( 'overflow', 'auto' )
        }

        /**
         * This is just for demo purposes. You should change
         * the styling for `.pickadate__active` in your stylesheet
         * to handle the "scrollability" of the page.
         */
        function initialBodyState() {
            $( 'body' ).css( 'overflow', '' )
        }
    </script>


    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-36321179-2']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>


</body>
